<template>
    <div>
        <div class="header" v-if="areaList.length > 0 ? true : false">
            <div>
                <van-icon name="warning" :color="setColor" />
                <span class="content">{{label}}</span>
            </div>
            <div class="jump" @click="open">
                {{rightLabel}}<img class="icon" src="../../assets/images/moreb.png" alt="">
            </div>
        </div>
        <van-cell-group class="group" :class="areaSwitch ? 'clo' : ''" inset border>
            <van-cell
                class="cell"
                :class="label === '高风险地区' ? 'high' : 'mid'"
                v-for="(item,index) in areaList" 
                :key="index"
                :title="item.split(fil)[0]" 
                :value="item.split(fil)[1]" 
                :label="label" 
            />
        </van-cell-group>
        <div v-show="areaSwitch" @click="open" class="bottom">展开更多▼</div>
        <div v-show="!areaSwitch" @click="open" class="bottom">{{rightLabel}}▲</div>
    </div>
</template>

<script>
    import {ref} from 'vue'
    export default {
        name: 'AreaShow',
        props: {
            setColor: String,
            areaList: Array,
            label:String
        },
        setup() {
            let areaSwitch = ref(true)
            let rightLabel = ref('查看')
            // let fil = /^('省'|'县'|'市'|'自治区'|'新区'|'区')/
            let fil = /省|自治区/

            function open() {
                areaSwitch.value = !areaSwitch.value
                rightLabel.value = areaSwitch.value ? '查看' : '收起'
            }

            return {    
                fil,
                open,
                areaSwitch,
                rightLabel
            }
        }
    }
</script>

<style lang="less" scoped>
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .content {
            margin-left: 0.05rem;
        }
        .jump {
            font-family: "微软雅黑",Arial, Helvetica, sans-serif;
            color: #3366ff;
            display: flex;
            align-items: center;
            .icon {
                width: 0.2rem;
            }
        }
    }

    .group {
        margin-top: 0.1rem;
        margin-bottom: 0.1rem;
        .cell {
            margin: 0.1rem 0;
            border-radius: .2rem;
        }
    }
    .bottom {
        font-size: 0.25rem;
        text-align: center;
        color: #3366ff;
        height: 0.5rem;
    }

    .clo {
        height: 5.4rem;
    }

    .high {
        background-color: #FFE4E1;
    }

    .mid {
        background-color: #FFEBCD;
    }
</style>